<template>
  <div>
    <VScaleScreen width="1920" height="1080" :fullScreen="true" style="background: transparent">
      <Header></Header>
      <div class="box">
        <div class="left">
          <div class="left1">
            <div class="top">
              <h1>人口增长与人口老龄化</h1>
            </div>
            <div class="button" ref="tu1"></div>
          </div>
          <div class="left2">
            <div class="top">
              <h1>人口增长与消费投资劳动力</h1>
            </div>
            <div class="button" ref="tu2"></div>
          </div>
        </div>
        <div class="center">
          <div class="center1">
            <div class="zuo">
              <div class="top">
                <h1>14117552481</h1>
                <p>全国总人口</p>
              </div>
            </div>
            <div class="you">
              <div class="top">
                <h1>418509</h1>
                <p>人口TOP1:广东</p>
              </div>
            </div>
          </div>
          <div class="center2">
            <div class="fei" ref="tu5">

            </div>
          </div>
        </div>
        <div class="right">
          <div class="right1">
            <div class="top">
              <h1>人口比例情况分析</h1>
            </div>
            <div class="button" ref="tu3"></div>
          </div>
          <div class="right2">
            <div class="top">
              <h1>2023年人口城镇化TOP20</h1>
            </div>
            <div class="button">
              <div class="yi">
                <p>杭州</p>
                <p>1220.4万人</p>
                <p>23.9%</p>
              </div>
              <div class="yi">
                <p>石家庄</p>
                <p>1220.47万人</p>
                <p>-3.68%</p>
              </div>
              <div class="yi">
                <p>长沙</p>
                <p>1223.93万人</p>
                <p>17.13%</p>
              </div>
              <div class="yi">
                <p>哈尔滨</p>
                <p>9985.5万人</p>
                <p>-11.6%</p>
              </div>
              <div class="yi">
                <p>合肥</p>
                <p>946.34万人</p>
                <p>9.5%</p>
              </div>
              <div class="yi">
                <p>南京</p>
                <p>942.34万人</p>
                <p>10.37%</p>
              </div>
              <div class="yi">
                <p>济南</p>
                <p>933.6万人</p>
                <p>9.44%</p>
              </div>
              <div class="yi">
                <p>沈阳</p>
                <p>911.8万人</p>
                <p>4.5%</p>
              </div>
              <div class="yi">
                <p>长春</p>
                <p>908.92万人</p>
                <p>2.03%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </VScaleScreen>
  </div>
</template>

<script setup lang="ts">
import VScaleScreen from 'v-scale-screen'
import * as echarts from 'echarts'
import Header from './components/Header/index.vue'
import { ref, onMounted } from 'vue'

window.onresize = function () {
  var myChart = echarts.init(tu1.value)
  myChart.resize()
}

const tu1 = ref()
onMounted(() => {
  var myChart = echarts.init(tu1.value)
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
      axisLine:{
        show:true,
        lineStyle:{
          color:'#fff'
        }
      },
      show:true
    },
    legend: {
      show: true
    },
    yAxis: {
      type: 'value',
      show:true
    },
    grid: {
       
    },
    series: [
      {
        name: '全国人口数量(万人)',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
        borderWidth: 1,
        axisLine:{
          show:true,
          lineStyle:{
            color:'#fff',
            
          }
        },
        aisTick:{
          show:true,
          lineStyle:{
            color:'#fff',
            
          },
        }

      },
      {
        data: [50, 60, 50, 60, 50, 70, 80, 90, 100, 110],
        type: 'line',
        smooth: true,
        name: '人口老龄化(%)'
      },
      {
        data: [100, 130, 135, 140, 150, 155, 160, 170, 180, 200],
        type: 'line',
        smooth: true,
        name: '养老保险(%)'
      }
    ]
  })
})

const tu2 = ref()
onMounted(() => {
  var myChart = echarts.init(tu2.value)
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
       axisLine:{
        show:true,
        lineStyle:{
          color:'#fff',
          width:2
        }
      },
      axisTick:{
        show:true,
        lineStyle:{
          color:'#fff',
          width:2
        }
      }
    },
    legend: {
      show: true
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      show: true,
      borderWidth: '10px'
    },
    series: [
      {
        name: '劳动力(万人)',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [150, 160, 170, 180, 190, 200, 220, 210, 230, 240],
        color: 'blue'
      },
      {
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        type: 'line',
        name: '消费(万元)'
      },
      {
        data: [160, 100, 0, 260, 0, 0, 100, 30, 160, 50],
        type: 'line',
        name: '投资(%)'
      }
    ]
  })
})

const tu3 = ref()
onMounted(() => {
  var myChart = echarts.init(tu3.value)
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      top: '100px'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1208, name: '城镇人口' },
          { value: 735, name: '乡村人口' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
})

import ch from '../ch.json'
const tu5 = ref()
echarts.registerMap('ch', ch)
onMounted(() => {
  var myChart = echarts.init(tu5.value)
  // 绘制图表
  myChart.setOption({
    series: [
      {
        name: '中国梯度',
        type: 'map',
        map:'ch'
        
      }
    ]
  })
})

</script>

<style scoped lang="scss">
canvas {
  width: 100%;
  height: 100%;
}
.box {
  width: 100%;
  height: 100%;
  .left {
    width: 30%;
    height: 100%;
    float: left;
    .left1 {
      width: 100%;
      height: 49%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .top {
        width: 100%;
        height: 10%;
        h1 {
          text-align: center;
          color: aqua;
        }
      }
      .button {
        width: 100%;
        height: 500px;
      }
    }
    .left2 {
      width: 100%;
      height: 49%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .top {
        width: 100%;
        height: 10%;
        h1 {
          text-align: center;
          color: aqua;
        }
      }
      .button {
        width: 100%;
        height: 400px;
      }
    }
  }
  .center {
    width: 39%;
    height: 100%;
    margin-left: 0.5%;
    // background-color: aqua;
    float: left;
    .center1 {
      width: 100%;
      height: 19%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .zuo {
        width: 50%;
        height: 100%;
        float: left;
        .top {
          width: 100%;
          height: 50%;
          h1 {
            color: yellow;
            font-size: 35px;
            margin-left: 50px;
            margin-top: 50px;
          }
          p {
            margin-left: 120px;
            margin-top: 30px;
            color: #fff;
            font-size: 20px;
          }
        }
      }
      .you {
        width: 50%;
        height: 100%;
        float: left;
        .top {
          width: 100%;
          height: 50%;
          h1 {
            color: yellow;
            font-size: 35px;
            margin-left: 120px;
            margin-top: 50px;
          }
          p {
            margin-left: 120px;
            margin-top: 30px;
            color: #fff;
            font-size: 20px;
          }
        }
      }
    }
    .center2 {
      width: 100%;
      height: 80%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .fei{
        width: 100%;
        height: 800px;
      }
    }
  }
  .right {
    width: 30%;
    height: 100%;
    float: left;
    margin-left: 0.5%;
    .right1 {
      width: 100%;
      height: 49%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .top {
        width: 100%;
        height: 10%;
        h1 {
          text-align: center;
          color: aqua;
        }
      }
      .button {
        width: 100%;
        height: 500px;
      }
    }
    .right2 {
      width: 100%;
      height: 49%;
      margin-top: 1%;
      background: rgba(225, 225, 225, 0.1);
      .top {
        width: 100%;
        height: 10%;
        h1 {
          text-align: center;
          color: aqua;
        }
      }
      .button {
        width: 100%;
        height: 500px;
        .yi {
          width: 100%;
          height: 20px;
          margin-top: 20px;
          p {
            float: left;
            line-height: 20px;
            margin-left: 80px;
            color: #fff;
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>